<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>众筹</title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/page.css">
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/media.js"></script>
		<style>
			.All-the-chips .td .td2 {
				top: 11vw;
				left: 0;
				right: 0;
			}
			
			.clearfix {
				position: relative;
			}
			
			.psss {
				position: absolute;
				bottom: 10px;
				font-size: 12px;
				color: #666666;
				width: 2.6rem;
			}
			
			.spans1 {
				background: url(../img/791500708915_.pic.jpg) no-repeat left;
				background-size: .12rem .1rem;
				padding-left: .15rem;
				margin-right: .2rem;
			}
			
			.ems1 {
				background: url(../img/811500708915_.pic.jpg) no-repeat left;
				background-size: .12rem .1rem;
				padding-left: .15rem;
				/* margin-right: .5rem*/
			}
			
			.is {
				background: url('../img/支出记录 时间@2x.png') no-repeat left;
				background-size: .12rem .1rem;
				padding-left: .15rem;
				float: right;
			}
			
			.rage {
				line-height: 3px;
				margin-top: 5px;
			}
			
			.All-the-chips .bd .bd1 ul li .right p:nth-child(3) #myProgress {
				/* position: relative; */
				/* top: -6px; */
				display: inline-block;
				/* margin-left: .05rem; */
				width: 2.48rem;
				height: 3px;
				border-radius: 3px;
				background-color: #e6e6e6;
				color: #0064B4;
			}
			
			h5 {
				width: 2.6rem;
				height: 0.16rem;
				line-height: 0.16rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</style>
	</head>
	<script>
		$("#bodys").height($(window).height());
	</script>
	<body id="bodys" style="background: #f8f8f8;">
		<div id="loadingToast" class="weui_loading_toast" style="display:block;">
			<div class="weui_mask_transparent"></div>
			<div class="weui_toast">
				<div class="weui_loading">
					<!-- :) -->
					<div class="weui_loading_leaf weui_loading_leaf_0"></div>
					<div class="weui_loading_leaf weui_loading_leaf_1"></div>
					<div class="weui_loading_leaf weui_loading_leaf_2"></div>
					<div class="weui_loading_leaf weui_loading_leaf_3"></div>
					<div class="weui_loading_leaf weui_loading_leaf_4"></div>
					<div class="weui_loading_leaf weui_loading_leaf_5"></div>
					<div class="weui_loading_leaf weui_loading_leaf_6"></div>
					<div class="weui_loading_leaf weui_loading_leaf_7"></div>
					<div class="weui_loading_leaf weui_loading_leaf_8"></div>
					<div class="weui_loading_leaf weui_loading_leaf_9"></div>
					<div class="weui_loading_leaf weui_loading_leaf_10"></div>
					<div class="weui_loading_leaf weui_loading_leaf_11"></div>
				</div>
				<p class="weui_toast_content">数据加载中...</p>
			</div>
		</div>
		<!--正文-->
		<div id="content" style="visibility: hidden;">

			<div class="All-the-chips bc-gray">
				<div class="hd flex">
					<span id="tab1" class="tabs active" on="0">综合推荐</span>
					<!-- <span @click='click_type()'>全部类别</span> -->
					<span class="tabs" on="0" id="tab2">全部类别</span>
				</div>
				<div class="td">
					<div class="td1" id="td1">
						<ul>
							<!--<li :class="{active:$index==0}" v-for='item in num' @click='save_argument_1(this)'>-->
							<!--{{item.t1}}-->
							<!--</li>-->
							<li first="0" second="0">综合推荐</li>
							<li first="1" second="0">最新上线</li>
							<li first="2" second="0">金额最多</li>
							<li first="3" second="0">支持最多</li>
							<!--<li  first="4" second="0" >-->
							<!--即将结束-->
							<!--</li>-->
							<!--<li @click='save_argument_3(this)'>-->
							<!--即将开始-->
							<!--</li>-->
						</ul>
					</div>
					<div class="td2" id="td2">
						<ul class="clearfix" id="allobj">
							<!--<li class="active">全部类别</li>-->
							<!--<li v-for='item in type' @click='save_argument_2(this)'>{{item.firstTypeDiscribe}}</li>-->
						</ul>
					</div>
				</div>
				<div class="bd">
					<div class="bd1" v-if='see'>
						<ul id="mainul">
							<!--<li class="clearfix" v-for='item in Default_data' @click='go_info(this,item.state)'>-->
							<!--<img :src="item.produceHeadImages" alt="">-->
							<!--<div class="right">-->
							<!--<h5>{{item.produceDiscribe}}</h5>-->
							<!--<p>￥-->
							<!--<font>{{item.minimumMoney}}</font><span>起</span></p>-->
							<!--<p class="rage">-->
							<!--<progress id="myProgress" value="{{item.amountaofmoney}}" max="{{item.targetAmount}}"></progress><span v-html="hahas(item.amountaofmoney,item.targetAmount)"></span>-->
							<!--</p>-->
							<!--<p v-html="countDown(item.supportNum,item.targetAmount,item.surplusTime,item.state,$index)">-->
							<!--&lt;!&ndash; <span>{{item.supportNum}}人</span>-->
							<!--<em style="margin-right:.3rem">{{item.targetAmount}}元</em>-->
							<!--<i>{{item.surplusTime}}天</i>&ndash;&gt;-->
							<!--<p class="psss"></p>-->
							<!--</p>-->
							<!--</div>-->
							<!--</li>-->
						</ul>
					</div>
					<div class="bd1" v-else>
						<ul>
							<!--<li class="clearfix" v-for="item in Default_data">
                        <img :src="item." alt="">
                        <div class="right">
                            <h5>内容内容内容内容内容内容</h5>
                            <p>￥4000<span>起</span></p>
                            <p class="rage" style="display:none;">
                                <progress  value="75" max="100"></progress><span>75%</span>
                            </p>
                            <p style="display:none;">
                                <span>1544人</span>
                                <em>31.08万元</em>
                                <i>26天</i>
                            </p>
                            <div><span>16小时</span>后开始</div>
                        </div>
                    </li>-->
						</ul>
					</div>
				</div>

			</div>
			<!--灰色浮层-->
			<div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>
		</div>
	</body>	
		<script src='../js/vue.js'></script>
		<script src='../js/vue-resource.min.js'></script>
		<script>
			function loading2() {
				$("#loadingToast").css('visibility','visible');	
				setTimeout(function() {
					$("#loadingToast").hide();
					$("#content").css('visibility','visible');
				}, 1000)
			}
			$(function() {
				twoobj(); //加载右边全部类别
				jz(0, 0)
				// 点击综合推荐 tab分类点击事件
				$(".hd .tabs").click(function() {
					var _on = $(this).attr("on");
					if(_on == 0) {
						var i = $(this).index();
						$(".tabs").attr("class", "tabs");
						$(this).addClass("active");
						$('.td>div').hide();
						$('.td>div').eq(i).show();
						$(".tabs").attr("on", "0");
						$(this).attr("on", "1");
						$("#bodys").height($(window).height());
						$("body").css('overflow', 'hidden');
					} else {
						$("body").css('overflow', 'auto');
						$('.td>div').hide();
						$("#bodys").height($(window).height());
						$(this).attr("on", "0");
					}

				})
			})
			var otimer = 'null';
			function jz(first, second) {
				loading2();
				$.ajax({ //加载数据
					url: base_url + "ZITAOHUI/recommend",
					data: {
						first: first,
						second: second
					},
					dataType: "json",
					success: function(data) {
						//console.log(JSON.stringify(data));
						$("#mainul").html('');
						var dataList = [];
						var _d = data.extend.list;
						if(data.extend.list.length >= 1) {
							for(var i = 0; i < data.extend.list.length; i++) {
								dataList.push(data.extend.list[data.extend.list.length - 1 - i])
							}
						};
						//console.log(dataList);
						if(dataList.length == 0) {
							$("#mainul").html('<div style="margin-top: 20px;text-align: center">' + "暂无数据" + '</div>');
						} else {
							$.each(dataList, function(k, item) {
								console.log(k);
								$("#mainul").append('  <li class="clearfix" data-id="' + item.id + '" data-status="' + item.state + '"  onclick="go_info(this)">' +
									'<img src="' + item.produceHeadImages + '" alt="">' +
									'<div class="right">' +
									'<h5>' + item.produceDiscribe + '</h5>' +
									'<p>￥' +
									'<font>' + item.minimumMoney + '</font><span>起</span></p>' +
									'<p class="rage">' +
									'<progress id="myProgress" value="' + item.amountaofmoney + '" max="' + item.targetAmount + '"></progress><span v-html="hahas(item.amountaofmoney,item.targetAmount)"></span>' +
									'</p>' +
									'<p>' +
									'<div class="psss">' + '<span class="spans1">' + item.supportNum + '</span><em class="ems1">' + item.targetAmount + '</em><i class="is">' + "加载中..." + '</i>' + '</div>' +
									'</p>' +
									'</div>' +
									'</li>')
								countDown(item.surplusTime,item.state,k);
							})
						}
					}

				})
			}

			function twoobj() {
				$.ajax({
					url: base_url + 'ZITAOHUI/crowdFundingType',
					dataType: "json",
					success: function(data) {
						var _d = data.extend.list;
						$("#allobj").html('');
						$.each(_d, function(k, v) {
							$("#allobj").append('<li first=0  second="' + v.firstTypeId + '">' + v.firstTypeDiscribe + '</li>');
						})
						$('.td2 ul li').click(function() {
							$(this).addClass('active').siblings().removeClass('active');
							$('.mask').hide();
							$('.td>div:eq(1)').removeClass('active');
							$("#tab2").text($(this).text());
							$("#tab2").attr('on', '1');
							$("#td2").hide();
							var first = $(this).attr("first");
							var second = $(this).attr("second");
							clearInterval(otimer);
							//console.log("first:" + first + " second:" + second);
							jz(first, second);
						})
					}
				})
			}

			function countDown(surplusTime, status, index) {
				//$(" .psss").eq(index).html();
				surplusTime_arr[index] = surplusTime;
				if(status == 1) {
					daojishi(surplusTime,index);
				} else if(status == 0) {
					//return '活动暂未开始';
					$(".psss").eq(index).html("活动暂未开始");
				} else if(status == 2) {
					//return '活动结束';
					$(".psss").eq(index).html("活动结束");
					
				}
			}
			var surplusTime_arr = [];
			function daojishi(surplusTime, index, supportNum, targetAmount) {
				var mss = '';
				//otimer = setInterval(function() {
					var msg = '';
					if(surplusTime <= 0) {
						$(".psss").eq(index).html('已结束');
						$(".psss").eq(index).parent().parent().removeAttr("onclick");
					} else {
						var dd = parseInt(surplusTime / 60 / 60 / 24, 10); //计算剩余的天数
						var hh = parseInt(surplusTime / 60 / 60 % 24, 10); //计算剩余的小时数
						var mm = parseInt(surplusTime / 60 % 60, 10); //计算剩余的分钟数
						var ss = parseInt(surplusTime % 60, 10); //计算剩余的秒数
						hh = checkTime(hh);
						mm = checkTime(mm);
						ss = checkTime(ss);
						msg = "距离结束" + dd + "天 " + hh + ":" + mm + ":" + ss;
						surplusTime--;
						//$(".psss").eq(index).html('<span class="spans1">' + supportNum + '</span><em class="ems1">' + targetAmount + '</em><i class="is">' + msg + '</i>');
						$(".psss").eq(index).find('.is').html(msg);
					}
				//}, 1000);
				clearInterval(time_sec);
				countZero();
			}
			var time_sec = '';
			function countZero(){
				time_sec = setInterval(function(){
					for(var i=0;i<surplusTime_arr.length;i++){
						if(surplusTime_arr[i] <= 0) {
							$(".psss").eq(i).html('已结束');
							$(".psss").eq(i).parent().parent().removeAttr("onclick");
						} else {
							var dd = parseInt(surplusTime_arr[i] / 60 / 60 / 24, 10); //计算剩余的天数
							var hh = parseInt(surplusTime_arr[i] / 60 / 60 % 24, 10); //计算剩余的小时数
							var mm = parseInt(surplusTime_arr[i] / 60 % 60, 10); //计算剩余的分钟数
							var ss = parseInt(surplusTime_arr[i] % 60, 10); //计算剩余的秒数
							hh = checkTime(hh);
							mm = checkTime(mm);
							ss = checkTime(ss);
							msg = "距离结束" + dd + "天 " + hh + ":" + mm + ":" + ss;
							surplusTime_arr[i]--;
							//$(".psss").eq(index).html('<span class="spans1">' + supportNum + '</span><em class="ems1">' + targetAmount + '</em><i class="is">' + msg + '</i>');
							$(".psss").eq(i).find('.is').html(msg);
						}
					}
				},1000)
			}

		$(".td2 ul").on('li','click',function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.mask').hide();
			$('.td>div:eq(1)').removeClass('active');
			$("#tab2").text($(this).text());
			$("#tab2").attr('on', '1');
			$("#td2").hide();
			var first = $(this).attr("first");
			var second = $(this).attr("second");
			clearInterval(otimer);
			console.log("first:" + first + " second:" + second);
			jz(first, second);	
		})
		$('.td1 ul li').click(function() {
			$(this).addClass('active').siblings().removeClass('active');
			$('.mask').hide();
			$("#tab1").text($(this).text());
			$('.td>div').removeClass('active');
			$(this).parent('.All-the-chips').find('.hd span:eq(0)').removeClass('arrow-top')
			var first = $(this).attr('first');
			var second = $(this).attr('second');
			$("#tab1").attr('on', '0');
			clearInterval(otimer);
			//console.log("first:" + first + " second:" + second);
			jz(first, second);
			$("#td1").hide();
		})
		$('.td2 ul li').click(function() {
			$(this).addClass('active').siblings().removeClass('active');
			$('.mask').hide();
			$('.td>div:eq(1)').removeClass('active');
			$("#tab2").text($(this).text());
			$("#tab2").attr('on', '1');
			$("#td2").hide();
			var first = $(this).attr("first");
			var second = $(this).attr("second");
			clearInterval(otimer);
			//console.log("first:" + first + " second:" + second);
			jz(first, second);
		})
			function go_info(obj) {
				var $id = $(obj).attr("data-id");
				var $status = $(obj).attr("data-status");
				if($status == 0) {
					alert("亲，活动暂未开始");
					return false;
				}
				if($status == 2) {
					alert("亲，活动已经结束");
					return false;
				}
				window.location.href = '../page/All-the-chips-info.html?cf_id=' + $id;
			}

			$(function() {
				new Vue({
					el: 'body',
					data: {
						argument_1: '',
						argument_2: '',
						Default_data: [],
						type: [],
						isstart: false,
						num: [{
							t1: '综合推荐',
							t2: 0
						}, {
							t1: '最新上线',
							t2: 1
						}, {
							t1: '金额最多',
							t2: 2
						}, {
							t1: '支持最多',
							t2: 3
						}, {
							t1: '即将结束',
							t2: 4
						}],
						see: true,
						time: ''
					},
					ready: function() {
						/*     this.$http.get(base_url + 'ZITAOHUI/recommend', {
						         params: {
						             first: 0,
						             second: 0
						         }
						     }).then(
						         function (response) {
						             //console.log(response)

						             var Default_data = response.data.extend.list;
						             this.$set('Default_data', Default_data);
						         },
						         function () {

						         })*/
						this.$http.get(base_url + 'ZITAOHUI/crowdFundingType').then(
							function(response) {
								var all_data = response.data.extend.list;
								this.$set('type', all_data)
							},
							function() {

							})

						setTimeout(function() {
							
							
						}, 200);
					},
					methods: {
						//                  save_argument_1: function (t) {
						//                      //console.log(t)
						//                      this.$set('argument_1', t.item.t2);
						//                      document.getElementById("td1").style.display = 'none';
						//                      document.getElementById('bodys').style.overflow = 'auto';
						//                      $("#tab1").attr("on","0");
						//                      this.transfer(this.argument_1, this.argument_2)
						//                  },
						//                  
						//                  save_argument_2: function (t) {
						//                      this.$set('argument_2', t.item.firstTypeId)
						//                      //console.log(this.argument_2);
						//                      document.getElementById("td2").style.display = 'none';
						//                      document.getElementById('bodys').style.overflow = 'auto';
						//
						//                      this.transfer(this.argument_1, this.argument_2)
						//                  },
						//                 
						//                  save_argument_3: function (t) {
						//                      //console.log(t);
						//                      document.getElementById("td1").style.display = 'none';
						//                      document.getElementById('bodys').style.overflow = 'auto';
						//                      $("#tab1").attr("on","0");
						//                      this.transfer(5, this.argument_2)
						////                        this.see = true;
						//                  },
						//                  transfer: function (ar1, ar2) {
						//                      if (ar1 == '') {
						//                          ar1 = 0
						//                      }
						//                      if (ar2 == '') {
						//                          ar2 = 0
						//                      }
						//                      this.$http.get(base_url + 'ZITAOHUI/recommend', {
						//                          params: {
						//                              first: ar1,
						//                              second: ar2
						//                          }
						//                      }).then(
						//                          function (response) {
						//                              //console.log(response)
						//                              var Default_data = response.data.extend.list;
						//                              this.$set('Default_data', Default_data);
						//                          },
						//                          function () {
						//
						//                          })
						//                  },

						go_info: function(t, status) {
							if(status == 0) {
								alert("亲，活动暂未开始");
								return false;
							}
							if(status == 2) {
								alert("亲，活动已经结束");
								return false;
							}
							window.location.href = '../page/All-the-chips-info.html?cf_id=' + t.item.id
						},
						hahas(a, b) {
							//console.log(a+","+b);
							if(a == 0) {
								return 0;
							} else {
								var ss = (a / b).toFixed(2) * 100;
								return ss + "%";
							}
						}
					}
				})
			})

			function checkTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			}

			function restime(b) {
				var a = b.replace(/-/g, "/");
				return a;
			}
		</script>
</html>